<template>
  <div class="create-title-module">
    <el-form
      ref="formDataRef"
      :model="dataForm"
      :rules="formRules"
      label-position="right"
      label-width="85px"
    >
      <div class="form">
        <div class="one-cell">
          <el-form-item label="模块名称" prop="name" class="name">
            <el-input
              v-model.trim="dataForm.name"
              maxlength="20"
              size="small"
              placeholder="请填写模块名称"
              name="name"
              type="text"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="标题名称" prop="titleName" style="margin-right: 10px;">
            <el-input
              v-model.trim="dataForm.titleName"
              maxlength="50"
              size="small"
              placeholder="请填写标题名称"
              name="titleName"
              type="text"
            />
          </el-form-item>
          <titleStyTab :active="active" @tabTab="tabTab" />
        </div>
      </div>
    </el-form>
    <StyleSetting ref="stySetting" module="title" />
    <el-form :model="dataForm" label-position="right" label-width="80px">
      <el-form-item label="模块宽度" size="small" prop="layoutNum" style="margin-top: 6px;">
        <el-select v-model="dataForm.layoutNum" class="width240" popper-class="global-select-down" name="layoutNum">
          <el-option
            v-for="item in layoutOptions"
            :key="item.id"
            :label="item.name"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <fixed-pagination>
      <div class="center">
        <el-button type="primary" size="small" @click="toSubmit">保存</el-button>
        <el-button class="cancel-btn-style" type="info" size="small" @click="handleClose">取消</el-button>
      </div>
      <div v-if="isEdit" class="foot-info">
        <div class="item">更新人：{{ dataForm.updateUserName || '--' }}</div>
        <div class="item">
          更新时间：
          <span v-if="dataForm.updateTime">{{ dataForm.updateTime | format('YYYY/MM/DD HH:mm') }}</span>
          <span v-else>--</span>
        </div>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import { createChartTable, editChartTable } from '@/api/reportManage';
import { layoutOptions } from '@/filters/status';
import { format } from '@/filters/date';
import titleStyTab from './module/titleStyTab';
import StyleSetting from './commonStySetting/styleDiy';
import { parseJson } from '@/utils';
export default {
  components: { titleStyTab, StyleSetting },
  filters: { format },
  props: {
    tabId: {
      type: String | Number,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    editType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataForm: {
        kind: 5,
        name: '',
        layout: '',
        layoutNum: 36,
        titleName: '',
        titleStyle: 'left',
        styleConfig: ''
      },
      formRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写报表名称' }],
        layoutNum: [
          { required: true, trigger: 'change', message: '请选择页面布局展示' }
        ],
        titleName: [
          { required: true, trigger: 'blur', message: '请填写标题名称' }
        ]
      },
      layoutOptions,
      defaultLayout: { x: 0, y: 0, h: 0 },
      active: 0,
      defaultData: null
    };
  },
  mounted() {
    if (this.$refs.stySetting) {
      this.dataForm.styleConfig = this.$refs.stySetting.getStyle();
    }
    this.defaultData = JSON.parse(JSON.stringify(this.dataForm));
  },
  methods: {
    setDefault(data) {
      const dataForm = this.dataForm;
      const layout = parseJson(data.layout);
      Object.assign(dataForm, data);
      dataForm.layoutNum = Number(layout.w || 12);
      this.defaultLayout = layout;
      if (this.$refs.stySetting && dataForm.id) {
        this.$refs.stySetting.setDefault(dataForm.styleConfig);
      }
      switch (dataForm.titleStyle) {
        case 'left':
          this.active = 0;
          break;
        case 'center':
          this.active = 1;
          break;
        case 'right':
          this.active = 2;
          break;
      }
    },
    isDataChange() {
      if (this.$refs.stySetting) {
        this.dataForm.styleConfig = this.$refs.stySetting.getStyle();
      }
      return JSON.stringify(this.dataForm) !== JSON.stringify(this.defaultData);
    },
    getConfig(val) {
      const styleConfig = val;
      this.dataForm.styleConfig = JSON.stringify(styleConfig);
    },
    tabTab(item) { // 标题位置样式
      this.active = item;
      switch (item) {
        case 0:
          this.dataForm.titleStyle = 'left';
          break;
        case 1:
          this.dataForm.titleStyle = 'center';
          break;
        case 2:
          this.dataForm.titleStyle = 'right';
          break;
      }
    },
    toSubmit() {
      const dataForm = this.dataForm;
      if (this.$refs.stySetting) {
        dataForm.styleConfig = this.$refs.stySetting.getStyle();
      }
      this.$refs['formDataRef'].validate((valid) => {
        if (valid) {
          const layout = this.defaultLayout;
          layout.w = dataForm.layoutNum;
          this.defaultLayout = layout;
          dataForm.layout = JSON.stringify(layout);
          dataForm.tabId = this.tabId;
          dataForm.isMobile = this.$route.query.editMobileMode ? 1 : 0;
          if (!this.isEdit || this.editType === 'copy') {
            this.add(dataForm);
          } else {
            this.edit(dataForm);
          }
        } else {
          return false;
        }
      });
    },
    add(dataForm) {
      createChartTable(dataForm).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功');
          this.handleClose();
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.log(err);
        // this.$message.error(err.message);
      });
    },
    edit(dataForm) {
      dataForm.id = this.$route.params.id || '';
      editChartTable(dataForm).then(res => {
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.handleClose();
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.log(err);
        // this.$message.error(err.message);
      });
    },
    handleClose() {
      this.$emit('goBack');
    }
  }
};
</script>
<style lang="scss">
.create-title-module {
  margin-top: 16px;
  .one-cell {
    display: flex;
    flex-wrap: wrap;
  }
  .el-form {
    .el-form-item {
      .el-form-item__label {
        color: #666;
      }
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .foot-info {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    .item {
      flex-shrink: 0;
      margin-left: 10px;
      color: #999;
    }
  }
}
</style>
